<template>
  <el-dialog :title="title" :visible.sync="visible">
    <el-form :model="userInfo" label-position="right" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="userInfo.account" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" v-if="!userInfo.id">
        <el-input v-model="userInfo.password" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="userInfo.name" placehoder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userInfo.email" placehoder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="userInfo.phone" placehoder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="userInfo.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker v-model="userInfo.birthday" :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="部门选择">
        <el-cascader :options="deptList" :show-all-levels="false" :props="{label:'fullname',value:'id',emitPath:false}" v-model="userInfo.deptid"></el-cascader>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="warning" @click="visible=false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
const initInfo = {
  account: '',
  name: '',
  password: '',
  birthday: '',
  sex: 1,
  email: '',
  phone: '',
  deptid: '',
  status: 1,
  id: ''
}
export default {
  name: 'UserEdit',
  data () {
    return {
      title: '添加用户',
      visible: false,
      userInfo: {},
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      deptList: [],
      loading: {}
    }
  },
  methods: {
    init (info) {
      this.visible = true
      this.loading = this.$loading({ text: '加载中' })
      this.$http.get('dept/list').then(({ data }) => {
        if (data.code === 20000) {
          // const resDepList = data.data
          // this.deptList = resDepList.map(item => {
          //   return {
          //     label: item.fullname,
          //     value: item.id,
          //     children: item.children
          //   }
          // })
          this.loading.close()
          this.deptList = this.formatterTreeData(data.data)
          if (info) {
            this.title = '修改用户'
            this.userInfo = info
          } else {
            this.title = '添加用户'
            this.userInfo = initInfo
          }
        }
      })
    },
    formatterTreeData (arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].children.length === 0) {
          arr[i].children = undefined
        } else {
          this.formatterTreeData(arr[i].children)
        }
      }
      return arr
    },
    save () {
      this.$http.post('user', this.userInfo).then((res) => {
        if (res.data && res.data.code === 20000) {
          this.$message({
            message: this.userInfo.id ? '修改成功' : '添加成功',
            type: 'success',
            onClose: () => {
              this.visible = false
              this.$emit('reloadTable')
            }
          })
        } else {
          this.$alert('操作失败', { type: 'error' })
        }
      }).catch((err) => {
        const data = err.response.data
        this.$alert(data.message, { type: 'error' })
      })
    }
  }
}
</script>

<style scoped>

</style>
